import { Box } from "@mui/material";
import { DefaultComponentProps } from "@mui/material/OverridableComponent";
import React, { FC, useEffect, ReactNode } from "react";
import { BoxTypeMap } from "@mui/system";

type FormTitleType = "withBg" | "default";
export interface FormTitleProps {
  /**
   * title
   */
  title: string;
  /**
   * withBg: With default background style
   */
  titleType?: FormTitleType;
  /**
   * Configure title style with BoxTypeMap
   */
  titleProps?: DefaultComponentProps<BoxTypeMap>;
  /**
   * Configure form box style with BoxTypeMap
   */
  componentsProps?: DefaultComponentProps<BoxTypeMap>;
  /**
   * children Node
   */
  children?: ReactNode;
}

/**
 * FormTitle for Form components
 */
const FormTitle: FC<FormTitleProps> = (props) => {
  const {
    title,
    children,
    titleProps,
    componentsProps,
    titleType = "default",
  } = props;
  const defTitleProps: DefaultComponentProps<BoxTypeMap> = {
    py: "10px",
    fontSize: "14px",
    fontWeight: "bold",
    color: "#15428b",
    ...titleProps,
  };
  const defObj = {
    withBg: {
      p: "10px",
      bgcolor: "#dfe8f6",
      border: "1px solid #99bbe8",
      borderRadius: "4px",
    },
  };
  const defProps: DefaultComponentProps<BoxTypeMap> = {
    ...(defObj[titleType] || {}),
    ...componentsProps,
  };
  useEffect(() => {
    return () => {};
  }, []);

  return (
    <div className="cFormTitle">
      <Box {...defTitleProps}>{title}</Box>
      <Box {...defProps}>{children}</Box>
    </div>
  );
};

export default FormTitle;
